<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 后台管理开发框架</title>
<link href="/favicon.ico" rel="icon">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/static/admin/layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="/static/admin/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- // 重定位Style -->
<style>
    html, body,.layui-fluid, .layui-card,.layui-card-body,.layui-col-md3,.layui-col-md9 {
        height: 97%;
    }
    .layui-card-header.layuiadmin-card-header-auto {
        border-bottom: 0px;
        padding-bottom: 0px;
    }
    .eleTree-title {
        cursor: pointer;
    }

    .layui-card-body {
        padding: 0px 30px;
        padding-bottom: 5px;
    }

    .layui-card-header h5 {
        font-size: 16px;
    }

    .layui-table-tool-temp {
        padding-right: 0px;
    }

</style>
<div class="layui-col-md3">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto" style="padding-bottom: 5px">
                <div class="layui-inline layui-hide" id="toolbar">
                    <!-- // 打开添加页面 -->
                    <button class="layui-btn icon-btn" lay-open="add" lay-title="添加字典" lay-area="398px" lay-url="#editforms" lay-callback="edit" >
                        <i class="layui-icon layui-icon-add-1"></i>添加
                    </button>
                    <!-- // 修改页面 -->
                    <button class="layui-btn icon-btn" lay-open="edit" lay-title="修改字典" lay-area="398px" lay-url="#editforms" lay-callback="edit" >
                        <i class="layui-icon layui-icon-edit"></i>修改
                    </button>
                    <!-- // 删除所有 -->
                    <button class="layui-btn icon-btn layui-btn-danger" lay-batch="lay-tree"  lay-url="{:url('/system.dictionary/del')}" >
                      <i class="layui-icon layui-icon-delete"></i>删除
                    </button>
                </div>
            </div>
            <div class="layui-card-body">
                <!-- // 创建数据实例 -->
                <table class="layui-table" 
                        lay-data="{
                        url:'{:url('/system.dictionary/index/')}?pid=parent', 
                        toolbar: '#toolbar',
                        defaultToolbar: [],
                        id:'lay-tree'}" 
                        lay-filter="lay-tree" >
                  <thead>
                    <tr>
                      <th lay-data="{type:'radio'}"></th>
                      <th lay-data="{field:'name'}">字典名称</th>
                    </tr>
                  </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="layui-col-md9" >
    <!-- // 展示数据 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <!-- // 默认操作按钮 -->
            <div class="layui-card-header layuiadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">按状态查询</option>
                            <option value="2" >正常</option>                                 
                            <option value="1" >关闭</option>                             
                        </select>
                    </div>  
                </div>

                <div class="layui-inline"><div class="layui-input-inline ">
                    <input name="name" class="layui-input" type="text" placeholder="关键字搜索"/></div>
                </div>

                <div class="layui-inline" >
                    <!-- // 默认搜索 -->
                    <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i class="layui-icon layui-icon-search"></i>搜索</button>
                    <!-- // 打开添加页面 -->
                    <button class="layui-btn icon-btn" lay-open="" lay-title="添加字典项" lay-area="398px" lay-url="#editforms" >
                        <i class="layui-icon layui-icon-add-1"></i>添加
                    </button>
                    <!-- // 删除所有 -->
                    <button class="layui-btn icon-btn layui-btn-danger" lay-batch="lay-tableList"  lay-url="{:url('/system.dictionary/del')}" >
                      <i class="layui-icon layui-icon-delete"></i>删除
                    </button>
                </div>
                </div>
            </div>   
            </div>

            <!-- // 创建数据实例 -->
            <table id="lay-tableList" lay-filter="lay-tableList"></table>        
        </div>
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms" >
<div class="layui-fluid layui-bg-white">
    <form class="layui-form layui-form-fixed" lay-filter="editforms">
    <input type="text" name="id" hidden="">
    <input type="text" class="pid" name="pid" value="{$pid}" hidden="">
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>字典名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入字典名称" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">字典值</label>
        <div class="layui-input-block">
            <input name="alias" placeholder="请输入字典值" class="layui-input"  lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序号</label>
        <div class="layui-input-block">
            <input name="sort" placeholder="默认自动生成" type="number" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">字典备注</label>
        <div class="layui-input-block">
            <textarea name="content" id="content" style="min-height: 80px;" 
            placeholder="请输入字典备注" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-footer layui-form-item layui-center">
        <button class="layui-btn layui-btn-primary" type="button" pa-event="closePageDialog" >取消</button>
        <button class="layui-btn" lay-add="{:url('/system.dictionary/add/')}" lay-edit="{:url('/system.dictionary/edit/')}" lay-filter="submitPage" 
        lay-submit>提交</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表编辑框 -->
<script type="text/html" id="tableBar"> 
    <a class="layui-table-text" lay-title="编辑字典项" lay-url="#editforms" lay-area="398px" lay-event="edit" >编辑</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" lay-url="{:url('/system.dictionary/del/')}id/{{d.id}}" lay-event="del" >删除</a>
</script>

<script src="/static/admin/layui/layui.js?v=1.0.0"></script>
<script src="/static/admin/js/common.js?v=1.0.0"></script>
<script>
    layui.use(['admin','jquery','table','form'], function () {

        var admin = layui.admin;
        var jquery = layui.jquery;
        var table = layui.table;    
        var form = layui.form;

        // 定义表格URL
        var tableURL = "{:url('/system.dictionary/index')}";
        // 基础表格
        var isTable = table.render({
            elem: "#lay-tableList"
            ,url: tableURL
            ,page: true
            ,cols: [[
                {type: 'checkbox'},
                {field: 'id', align: 'center',sort: true,width: 80,  title: 'ID'},
                {field: 'name', align: 'center', title: '字典项名称'},
                {field: 'alias', align: 'center', title: '字典值'},
                {field: 'sort', align: 'center',  width: 135, title: '排序号'},
                {field: 'createtime', align: 'center', width: 160,title: '创建时间'},
                {align: 'center', toolbar: '#tableBar',width: 250, title: '操作'},
            ]]
        })

        table.on('radio(lay-tree)', function(obj){
            var data = obj.data
            var url = tableURL + '?pid=' + data.id;
            table.reload('lay-tableList', {
                url: url
            });

            changepid(data.id);
        });


        // 全局回调函数
        admin.callback.edit = function(clickthis,colletction,config) {

            var status = true;
            var data = table.checkStatus('lay-tree').data;
            if (clickthis.attr('lay-open') == 'edit') {
                status = false;
                form.val('editforms',data[0]);
            }
            
            form.on("submit(submitPage)",function(post){

                var pageThat = jquery(this),
                _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                post.field.pid = 0;
                // 开始POST提交数据
                pageThat.attr("disabled",true);
                jquery.post(_pageUrl,
                    post.field, function(res){
                        if (res.code == 200) {
                            layui.iziToast.success({
                                message: res.msg,
                            });

                            // 关闭当前窗口
                            table.reload('lay-tree');
                            layer.close(colletction.index);
                        }
                        else {
                            layui.iziToast.error({
                                message: res.msg,
                            });
                        }

                }, 'json');

                return false;
            })
        }

        function changepid(pid) {
            var html = jquery(jquery('#editforms').html());
            html.find('.pid').attr('value',pid);
            jquery('#editforms').html(html);
        }
    });
</script>
